<template>
  <div class="app-container">
    <el-form
      :model="formInline"
      class="form-inline"
      ref="form"
      label-width="160px"
    >
      <el-row :gutter="4">
        <el-col :lg="6" :xl="6"
          ><el-form-item label="支付状态" style="width: 100%">
              <el-select clearable v-model="formInline.payStatus" style="width:100%">
                <el-option label="待支付" :value="1">待支付</el-option>
                <el-option label="支付成功" :value="2">支付成功</el-option>
                <el-option label="支付失败" :value="3">支付失败</el-option>
              </el-select>
            </el-form-item
        ></el-col>
        <el-col :lg="6" :xl="6"
          ><el-form-item label="消费类别" style="width: 100%">
            <el-select clearable v-model="formInline.expenseType" style="width:100%">
                <el-option label="充值" :value="1">充值</el-option>
                <el-option label="消费" :value="2">消费</el-option>
                <el-option label="提现" :value="3">提现</el-option>
              </el-select>
            </el-form-item
        ></el-col>
        <el-col :lg="6" :xl="6"
          ><el-form-item label="交易号(微信、支付宝)" style="width: 100%">
            <el-input
              v-model="formInline.payTradeNo"
              placeholder="交易号(微信、支付宝)"
            ></el-input> </el-form-item
        ></el-col>
        <el-col :lg="6" :xl="6"
          ><el-form-item label="交易号(自定义)" style="width: 100%">
            <el-input
              v-model="formInline.tradeNo"
              placeholder="交易号(自定义)"
            ></el-input> </el-form-item
        ></el-col>
        <el-col :lg="6" :xl="6"
          ><el-form-item label="订单号" style="width: 100%">
            <el-input
              v-model="formInline.orderNum"
              placeholder="订单号"
            ></el-input> </el-form-item
        ></el-col>
        <el-col :lg="6" :xl="6"
          ><el-form-item label="手机号（账号）" style="width: 100%">
            <el-input
              v-model="formInline.phonenumber"
              placeholder="手机号（账号）"
            ></el-input> </el-form-item
        ></el-col>
        <el-col :lg="6" :xl="6"
          ><el-form-item label="公司名称" style="width: 100%">
            <el-input
              v-model="formInline.enterpriseName"
              placeholder="公司名称"
            ></el-input> </el-form-item
        ></el-col>
        <el-col :lg="6" :xl="6">
          <el-button type="primary" icon="el-icon-search" @click="getTableData">搜索</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-table ref="table" :data="tableData">
      <el-table-column align="center" prop="phonenumber" label="手机号（账号）"></el-table-column>
      <el-table-column align="center" prop="enterpriseName" label="公司名称"></el-table-column>
      <el-table-column align="center" prop="payStatus" label="支付状态"> 
        <template slot-scope="scope">
          <div>{{ scope.row.payStatus * 1 === 1 ? '待支付' : scope.row.payStatus * 1 === 2 ? '支付成功' : scope.row.payStatus * 1 === 3 ? '支付失败' : '' }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="expenseType" label="消费类别">
        <template slot-scope="scope">
          <div>{{ scope.row.expenseType * 1 === 1 ? '充值' : scope.row.expenseType * 1 === 2 ? '消费' : scope.row.expenseType * 1 === 3 ? '提现' : '' }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="tradeType" label="交易类型">
        <template slot-scope="scope">
          <div>{{ scope.row.tradeType * 1 === 1 ? '微信' : scope.row.tradeType * 1 === 2 ? '支付宝' : scope.row.tradeType * 1 === 3 ? '银联' : scope.row.tradeType * 1 === 4 ? '余额' : '' }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="money" label="发生金额"></el-table-column>
      <el-table-column align="center" prop="payTradeNo" label="交易号(微信支付宝自带交易号)"></el-table-column>
      <el-table-column align="center" prop="tradeNo" label="交易号(自定义的交易号)"></el-table-column>
      <el-table-column align="center" prop="orderNum" label="订单号（买保险的订单号）"></el-table-column>
      
      <el-table-column align="center" prop="createBy" label="创建者"></el-table-column>
      <el-table-column align="center" prop="createTime" label="创建时间"></el-table-column>
    </el-table>
    <el-pagination style="margin-top: 20px" background @size-change="handleSizeChange"
      @current-change="handleCurrentChange" :current-page="page.pageNum" :page-sizes="[10, 20, 50]"
      :page-size="page.pageSize" layout="->, total, sizes, prev, pager, next, jumper" :total="page.total">
    </el-pagination>
  </div>
</template>
<script>
import { getLabel } from '@/utils/func.js'
import { tradeType, payStatus, expenseType } from '@/utils/options'
export default {
  data() {
    return {
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      formInline: {
        payStatus: '',
        expenseType: '',
        payTradeNo: '',
        tradeNo: '',
        orderNum: '',
        phonenumber: '',
        enterpriseName: ''
      },
      tableData: [],
      tableHeight: 0,
      getLabel,
      tradeType,
      payStatus,
      expenseType
    };
  },
  methods: {
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      this.page.pageNum = val;
      this.getTableData();
    },
    setTableHeight() {
      this.$nextTick(() => {
        this.tableHeight =
          window.innerHeight - 180 + "px";
      });
    },
    getTableData() {
      this.$get("/wallet/expense/list", {
        ...this.formInline,
        pageNum: this.page.pageNum,
        pageSize: this.page.pageSize,
      }).then((res) => {
        this.tableData = res.rows;
        this.page.total = res.total;
      });
    },
  },
  mounted() {
    window.onresize = () => {
      this.setTableHeight();
    };
    this.setTableHeight();
    this.getTableData();
  },
};
</script>
<style scoped lang="scss">
.form-inline ::v-deep {
  width: 100%;

  .el-form-item__label {
    // padding: 0;
  }
}
</style>
  